<script>
export default {
  data() {
    return {
      // 数据定义
    };
  },
  onLaunch() {
    console.log('App Launch');
    // 应用主题
    this.applyTheme();
  },
  onShow() {
    console.log('App Show');
  },
  onHide() {
    console.log('App Hide');
  },
  methods: {
    // 应用主题配置
    applyTheme() {
      // 直接在样式中定义CSS变量，不依赖复杂的主题配置导入
      // 确保应用粉色和淡紫色系的少女风格
    }
  }
};
</script>


<style>
	/* 全局样式重置 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* 页面基础样式 - 增加顶部内边距 */
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #4A4A4A;
		background-color: #FFF5F7;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* 为所有页面增加顶部内边距 */
		padding-top: 20px !important;
	}
	
	/* 为所有页面容器添加隐藏导航栏的类 */
	.page-container {
		padding-top: calc(env(safe-area-inset-top, 0) + 20px) !important;
		min-height: 100vh;
	}
	
	/* 自定义导航栏容器样式 */
	.custom-navbar {
		background: linear-gradient(135deg, #FF85A2, #FFADC6);
		border-bottom: none;
		padding: env(safe-area-inset-top, 0) 24px 16px 24px;
		position: sticky;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(15px);
		box-shadow: 0 4px 20px rgba(255, 133, 162, 0.2);
		border-radius: 0 0 20px 20px;
		margin: 0 10px;
		margin-top: 10px;
		transition: all 0.3s ease;
		animation: floatSoft 3s ease-in-out infinite;
	}
	
	/* 导航栏标题样式 */
	.navbar-title {
		font-size: 18px;
		font-weight: bold;
		color: white;
		text-shadow: 0 2px 4px rgba(255, 133, 162, 0.3);
	}
	
	/* 按钮悬停效果 */
	.custom-navbar:active {
		transform: translateY(2px);
		box-shadow: 0 2px 10px rgba(255, 133, 162, 0.2);
	}

	/* 公共样式 */
	.flex {
		display: flex;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.text-center {
		text-align: center;
	}

	/* 主题色变量 - 慵懒休闲少女风 */
	:root {
		--primary-color: #FF85A2;
		--primary-light: #FFADC6;
		--primary-dark: #E56983;
		--secondary-color: #B794F4;
		--success-color: #9AE6B4;
		--warning-color: #FFD6A5;
		--error-color: #FFADAD;
		--info-color: #90CDF4;
		--text-primary: #4A4A4A;
		--text-secondary: #8A8A8A;
		--text-placeholder: #BDBDBD;
		--border-color: #FFE6EC;
		--border-light: #FFF0F5;
		--background-color: #FFF5F7;
		--paper-color: #FFFFFF;
	}
	
	/* 丰富的动态效果类 */
	.animate-float {
		animation: float 3s ease-in-out infinite;
	}
	
	.animate-float-slow {
		animation: float 4s ease-in-out infinite;
	}
	
	.animate-float-fast {
		animation: float 2s ease-in-out infinite;
	}
	
	.animate-bounce {
		animation: bounce 1s ease-in-out;
	}
	
	.animate-bounce-infinite {
		animation: bounce 1.5s ease-in-out infinite;
	}
	
	.animate-heartBeat {
		animation: heartBeat 1.3s ease-in-out;
	}
	
	.animate-heartBeat-infinite {
		animation: heartBeat 1.3s ease-in-out infinite;
	}
	
	.animate-pulse {
		animation: pulse 1.5s ease-in-out infinite;
	}
	
	.animate-pulse-fast {
		animation: pulse 1s ease-in-out infinite;
	}
	
	.animate-shimmer {
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
		background-size: 200% 100%;
		animation: shimmer 2s infinite;
	}
	
	.animate-rotate {
		animation: rotate 10s linear infinite;
	}
	
	.animate-rotate-slow {
		animation: rotate 20s linear infinite;
	}
	
	.animate-shake {
		animation: shake 0.6s ease-in-out;
	}
	
	.animate-fade-in {
		animation: fadeIn 0.5s ease-out;
	}
	
	.animate-slide-up {
		animation: slideUp 0.5s ease-out;
	}
	
	.animate-slide-down {
		animation: slideDown 0.5s ease-out;
	}
	
	.animate-scale-in {
		animation: scaleIn 0.3s ease-out;
	}
	
	.animate-scale-out {
		animation: scaleOut 0.3s ease-out;
	}
	
	/* 定义丰富的动画关键帧 */
	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}
	
	@keyframes bounce {
		0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
		40%, 43% { transform: translate3d(0, -10px, 0); }
		70% { transform: translate3d(0, -5px, 0); }
		90% { transform: translate3d(0, -2px, 0); }
	}
	
	@keyframes heartBeat {
		0% { transform: scale(1); }
		14% { transform: scale(1.1); }
		28% { transform: scale(1); }
		42% { transform: scale(1.1); }
		70% { transform: scale(1); }
	}
	
	@keyframes pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.05); }
		100% { transform: scale(1); }
	}
	
	@keyframes shimmer {
		0% { background-position: -200% 0; }
		100% { background-position: 200% 0; }
	}
	
	@keyframes rotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	@keyframes shake {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
		20%, 40%, 60%, 80% { transform: translateX(3px); }
	}
	
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	
	@keyframes slideUp {
		from { transform: translateY(20px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}
	
	@keyframes slideDown {
		from { transform: translateY(-20px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}
	
	@keyframes scaleIn {
		from { transform: scale(0.95); opacity: 0; }
		to { transform: scale(1); opacity: 1; }
	}
	
	@keyframes scaleOut {
		from { transform: scale(1); opacity: 1; }
		to { transform: scale(0.95); opacity: 0; }
	}
	
	@keyframes breathe {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}
	
	/* 通用过渡效果 */
	.transition-all {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.transition-fast {
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.transition-slow {
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* 软化过渡效果 */
	.transition-soft {
		transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	
	/* 弹性效果 */
	.bounce-effect {
		animation: bounceSoft 0.6s ease;
	}
	
	/* 自定义动画 - 软浮动 */
	@keyframes floatSoft {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-3px); }
	}
	
	/* 自定义动画 - 软弹跳 */
	@keyframes bounceSoft {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(0.98); }
	}
	
	/* 丰富的悬停效果 */
	.hover-scale:hover {
		transform: scale(1.05);
		box-shadow: 0 8px 20px rgba(255, 133, 162, 0.2);
	}
	
	.hover-scale:active {
		transform: scale(0.98);
	}
	
	.hover-float:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(255, 133, 162, 0.15);
	}
	
	.hover-pink-shadow:hover {
		box-shadow: 0 8px 20px rgba(255, 133, 162, 0.2);
	}
	
	.hover-soft-glow:hover {
		box-shadow: 0 0 15px rgba(255, 133, 162, 0.3);
	}
	
	/* 卡片样式 - 少女风设计 */
	.soft-card {
		background-color: var(--paper-color);
		border-radius: 20px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(255, 133, 162, 0.1);
		transition: all 0.3s ease-in-out;
		position: relative;
		overflow: hidden;
	}
	
	.soft-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
		border-radius: 20px 20px 0 0;
	}
	
	.soft-card:hover {
		box-shadow: 0 8px 20px rgba(255, 133, 162, 0.2);
		transform: translateY(-5px);
	}
	
	.fluffy-card {
		background-color: var(--paper-color);
		border-radius: 28px;
		padding: 24px;
		box-shadow: 0 8px 16px rgba(255, 133, 162, 0.12);
		transition: all 0.3s ease-in-out;
		border: 1px solid var(--border-light);
	}
	
	.fluffy-card:hover {
		box-shadow: 0 12px 24px rgba(255, 133, 162, 0.18);
		transform: translateY(-4px);
	}
	
	.glass-card {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(12px);
		border-radius: 20px;
		padding: 20px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
	}
	
	.bubble-card {
		background-color: var(--paper-color);
		border-radius: 16px;
		padding: 16px;
		box-shadow: 0 4px 8px rgba(255, 133, 162, 0.1);
		position: relative;
	}
	
	.bubble-card::after {
		content: '';
		position: absolute;
		bottom: 8px;
		right: 8px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
		opacity: 0.2;
		z-index: 0;
	}
	
	/* 按钮样式 - 少女风设计 */
	.btn-soft {
		background-color: var(--primary-color);
		color: white;
		border: none;
		border-radius: 28px;
		padding: 14px 28px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
		box-shadow: 0 4px 8px rgba(255, 133, 162, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.btn-soft::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease-in-out;
	}
	
	.btn-soft:hover::before {
		left: 100%;
	}
	
	.btn-soft:hover {
		background-color: var(--primary-dark);
		transform: translateY(-2px);
		box-shadow: 0 6px 12px rgba(255, 133, 162, 0.4);
	}
	
	.btn-soft:active {
		transform: translateY(0);
	}
	
	.btn-secondary {
		background-color: var(--secondary-color);
		color: white;
		border: none;
		border-radius: 28px;
		padding: 14px 28px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
		box-shadow: 0 4px 8px rgba(183, 148, 244, 0.3);
	}
	
	.btn-secondary:hover {
		background-color: #9F7AEA;
		transform: translateY(-2px);
		box-shadow: 0 6px 12px rgba(183, 148, 244, 0.4);
	}
	
	.btn-outline {
		background-color: transparent;
		color: var(--primary-color);
		border: 2px solid var(--primary-color);
		border-radius: 28px;
		padding: 12px 26px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}
	
	.btn-outline:hover {
		background-color: var(--primary-color);
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(255, 133, 162, 0.3);
	}
	
	/* 输入框样式 - 少女风设计 */
	.input-soft {
		border: 2px solid var(--border-color);
		border-radius: 24px;
		padding: 14px 20px;
		background-color: var(--paper-color);
		color: var(--text-primary);
		transition: all 0.3s ease-in-out;
		font-size: 15px;
	}
	
	.input-soft:focus {
		border-color: var(--primary-color);
		outline: none;
		box-shadow: 0 0 0 3px rgba(255, 133, 162, 0.1);
		transform: translateY(-1px);
	}
	
	.input-soft::placeholder {
		color: var(--text-placeholder);
		font-size: 14px;
	}
	
	/* 渐变背景类 */
	.gradient-primary {
		background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	}
	
	.gradient-secondary {
		background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
	}
	
	.gradient-soft {
		background: linear-gradient(135deg, #FF85A2 0%, #B794F4 100%);
	}
	
	.gradient-rainbow {
		background: linear-gradient(135deg, #FF85A2 0%, #B794F4 25%, #90CDF4 50%, #9AE6B4 75%, #FFD6A5 100%);
	}
	
	/* 毛玻璃效果 */
	.glassmorphism {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(12px);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
	
	.glassmorphism-dark {
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(16px);
		border: 1px solid rgba(255, 255, 255, 0.6);
	}
	
	/* 装饰元素 */
	.decorative-circle {
		position: absolute;
		border-radius: 50%;
		filter: blur(40px);
		opacity: 0.3;
		z-index: -1;
	}
	
	.decorative-circle-1 {
		top: -50px;
		right: -50px;
		width: 200px;
		height: 200px;
		background-color: var(--primary-light);
	}
	
	.decorative-circle-2 {
		bottom: -100px;
		left: -100px;
		width: 300px;
		height: 300px;
		background-color: var(--secondary-light);
	}
	
	/* 滚动条样式 */
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	
	::-webkit-scrollbar-track {
		background: var(--border-light);
		border-radius: 4px;
	}
	
	::-webkit-scrollbar-thumb {
		background: var(--primary-light);
		border-radius: 4px;
		transition: background 0.3s ease;
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: var(--primary-color);
	}
	
	/* 全局动画类 */
	.animated-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		overflow: hidden;
	}
	
	/* 确保所有页面都使用少女风设计 */
	.app-container {
		background-color: var(--background-color);
		min-height: 100vh;
		position: relative;
		z-index: 1;
	}
</style>
